<template>
  <div class="LayoutPageBar">
    <div class="pagesList" @contextmenu.prevent>
      <el-tag
        type="info"
        size="small"
        effect="dark"
        hit
        :class="CurrentPage.path === '/dashbord' ? 'action' : ''"
        @click="tagClick('/dashbord')"
        @contextmenu.prevent
      >
        <i class="el-icon-s-home"></i> 首页
      </el-tag>
      <el-tag
        v-for="(item, index) in pageTags"
        :key="item.path"
        :ref="`Tag_${index}`"
        :data-path="item.path"
        size="small"
        :class="CurrentPage.path === item.path ? 'action' : ''"
        closable
        effect="dark"
        type="info"
        hit
        @click="tagClick(item.path)"
        @close="tagClose(item, index)"
        @click.right.prevent="handleClickContextMenu($event, item, index)"
      >
        <i v-if="item.meta.icon" :class="item.meta.icon"></i>
        {{ item.meta.title }}
      </el-tag>
    </div>
    <div
      class="rightMenu"
      :style="{ left: menuLeft, top: menuTop }"
      v-show="rightMenuVisible"
    >
      <div class="triangle"></div>
      <el-button
        type="text"
        class="rightMenuItem"
        :disabled="MenuStatus.disableRefresh"
        @click="refresh"
        >刷新</el-button
      >
      <el-button
        type="text"
        class="rightMenuItem"
        :disabled="MenuStatus.disableCloseOther"
        @click="closeOther"
        >关闭其它</el-button
      >
      <el-button
        type="text"
        class="rightMenuItem"
        :disabled="MenuStatus.disableCloseLeft"
        @click="closeLeft"
        >关闭左侧</el-button
      >
      <el-button
        type="text"
        class="rightMenuItem"
        :disabled="MenuStatus.disableCloseRight"
        @click="closeRight"
        >关闭右侧</el-button
      >
      <el-button type="text" class="rightMenuItem" @click="closeAll"
        >全部关闭</el-button
      >
    </div>
  </div>
</template>

<script>
import { computed, onMounted, reactive, ref, toRef, toRefs,nextTick,inject  } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "pageBar",
  setup() {
    const appCtx = inject("appCtx");
    // 页面标签栏横向滚动控制
    onMounted(() => {
      let PagesListDom = document.querySelector(".pagesList");
      // 滚动条控制
      const OnMousewheel = (e) => {
        let eventDelta = -e.wheelDelta || -e.deltaY * 40;
        PagesListDom.scrollLeft = PagesListDom.scrollLeft + eventDelta / 2;
      };
      //监听鼠标滚动事件
      PagesListDom.addEventListener("mousewheel", OnMousewheel) ||
        PagesListDom.addEventListener("DOMMouseScroll", OnMousewheel);

      // 全局点击其它元素关闭
      window.addEventListener("click", () => {
        closeRightMenu();
      });
      // 窗口缩放关闭
      window.addEventListener("resize", () => {
        closeRightMenu();
      });
    });

    const $router = useRouter();
    const $store = useStore();
    let { CurrentPage, pageTags } = toRefs($store.state.Layout);
    let TagsLength = computed(() => {
      return $store.state.Layout.pageTags.length;
    });
    // tag点击
    const tagClick = (path) => {
      $router.push(path);
      console.log('$store.state.Layout.cachePages',$store.state.Layout.cachePages);
    };
    // tag关闭
    const tagClose = (item, index) => {
      // let TagsLength = pageTags.length;
      if (TagsLength.value === 1) {
        $router.push("/");
      } else if (item.path == CurrentPage.value.path) {
        let nextAction =
          index < TagsLength.value - 1
            ? index + 1
            : index === TagsLength.value - 1
            ? index - 1
            : 0;
        let currentItem = pageTags.value[nextAction];
        $router.push(currentItem.path);
      }
      // 清除keepalive缓存
      // this.delCachePage(item.name);
      $store.commit("Layout/delCachePage", item.name);
      $store.commit("Layout/closePageTag", index);
      console.log('$store.state.Layout.cachePages',$store.state.Layout.cachePages);
    };

    // 右键菜单定位数据
    let menuLeft = ref(0);
    let menuTop = ref(0);
    // 被右键选中的tag
    let rightClick_Tag = null;
    let rightClick_Index = ref(null);
    // 右键菜单显示状态
    let rightMenuVisible = ref(false);
    // 右键菜单状态
    let MenuStatus = reactive({
      disableRefresh: true,
      disableCloseOther: true,
      disableCloseLeft: true,
      disableCloseRight: true,
    });
    // 点击右键
    const handleClickContextMenu = (e, item, index) => {
      // TODO 简化
      // let _MenuStatus = {
      //   disableRefresh: false,
      //   disableCloseOther: false,
      //   disableCloseLeft: false,
      //   disableCloseRight: false,
      // };
      MenuStatus.disableRefresh = false;
      MenuStatus.disableCloseOther = false;
      MenuStatus.disableCloseLeft = false;
      MenuStatus.disableCloseRight = false;
      // const e = event || window.event;
      rightClick_Tag = item;
      rightClick_Index.value = index;
      menuLeft.value = e.clientX + "px";
      menuTop.value = e.clientY + 20 + "px";

      // 只有一项
      if (TagsLength.value === 1) {
        MenuStatus.disableCloseOther = true;
        MenuStatus.disableCloseLeft = true;
        MenuStatus.disableCloseRight = true;
      }
      // 多项第一项
      else if (index === 0 && TagsLength.value > 1) {
        MenuStatus.disableCloseLeft = true;
      }
      // 多项最后一项
      else if (index === TagsLength.value - 1 && TagsLength.value > 1) {
        MenuStatus.disableCloseRight = true;
      }
      // 仅当前页可刷新
      MenuStatus.disableRefresh = CurrentPage.value.path === item.path ? false : true;
      // MenuStatus = toRefs(..._MenuStatus);
      // console.log(MenuStatus);
      rightMenuVisible.value = true; // 显示菜单
    };
    // 关闭右键菜单
    const closeRightMenu = () => {
      rightMenuVisible.value = false;
    };
    // 刷新
    const reload = inject("reload");
    const refresh = () => {
      console.log("刷新");
      // 刷新时清除本页缓存
      $store.commit("Layout/delCachePage", rightClick_Tag.name);
      nextTick(() => {
        !rightClick_Tag.meta.notKeep &&
          $store.commit("Layout/addCachePage", rightClick_Tag.name);
      });
      reload();
      closeRightMenu();
    };
    // 关闭其它
    const closeOther = () => {
      $store.commit("Layout/closeOtherTag", rightClick_Tag.path);
      if (rightClick_Tag.path != CurrentPage.value.path) {
        $router.push(rightClick_Tag.path);
      }
      closeRightMenu();
    };
    // 关闭左侧
    const closeLeft = () => {
      let currentIndex = actionPageIndex();
      console.log(currentIndex, rightClick_Index.value);
      if (currentIndex < rightClick_Index.value) {
        $router.push(rightClick_Tag.path);
      }
      $store.commit("Layout/closeLeftTag", rightClick_Index.value);
      //  closeLeftTag(rightClick_Index.value);
      closeRightMenu();
    };
    // 关闭右侧
    const closeRight = () => {
      console.log("关闭右侧");
      let currentIndex = actionPageIndex();
      if (currentIndex > rightClick_Index.value) {
        $router.push(rightClick_Tag.path);
      }
      $store.commit("Layout/closeRightTag", rightClick_Index.value);
      closeRightMenu();
    };
    // 全部关闭
    const closeAll = () => {
      $router.push("/");
      $store.commit("Layout/closeAllTag");
      closeRightMenu();
    };
    // 左侧/右侧 关闭时判断actionPage是否在其中
    const actionPageIndex = () => {
      return pageTags.value.findIndex((item) => {
        // console.log(item.path , CurrentPage)
        return item.path === CurrentPage.value.path;
      });
    };
    return {
      CurrentPage,
      pageTags,
      tagClick,
      tagClose,
      handleClickContextMenu,
      menuLeft,
      menuTop,
      rightMenuVisible,
      MenuStatus,
      refresh,
      closeOther,
      closeLeft,
      closeRight,
      closeAll,
    };
  },
};
</script>

<style lang="scss" scoped>
.LayoutPageBar {
  // height: 36px;
  .pagesList {
    padding-bottom: 5px;
    margin-bottom: 2px;
    overflow: auto;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    &:hover {
      // 滚轮滑动滚动条时取消平滑过渡，否则出现滑动效率低现象
      scroll-behavior: auto;
    }
    > :first-child {
      margin-left: 0 !important;
    }

    > :last-child {
      margin-right: 0 !important;
    }

    .el-tag {
      margin: 0 5px;
      cursor: pointer;

      &.action {
        background: $ThemeActiveText;
        border: 1px solid $ThemeActiveText;
      }
    }
  }
  .rightMenu {
    width: 100px;
    height: 158px;
    padding: 10px 0;
    background: #fffefe;
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.3);

    .triangle {
      width: 0;
      height: 0;
      border: 8px solid;
      border-color: transparent transparent #fff;
      position: absolute;
      top: -16px;
      left: 14px;
    }

    .rightMenuItem {
      display: block;
      width: 100%;
      min-height: 0;
      margin: 0;
      text-align: left;
      padding: 0 20px;
      line-height: 26px;
      font-size: 14px;
      color: $ThemeActiveText;

      // cursor: pointer;
      &.is-disabled {
        color: #c0c4cc;

        &:hover {
          background: none;
        }
      }

      &:hover {
        background: #f5f7fa;
      }
    }
  }
}

/*滚动条的宽度*/
::-webkit-scrollbar {
  height: 2px;
}

/*外层轨道*/
::-webkit-scrollbar-track {
  display: none;
}

/*滚动条的设置*/

::-webkit-scrollbar-thumb {
  background-color: #edeff4;
  background-clip: padding-box;
}

/*滚动条移上去的背景*/
.LayoutPageBar:hover ::-webkit-scrollbar-thumb {
  background-color: $ThemeActiveText;
}

::-webkit-scrollbar-thumb:hover {
  background-color: $ThemeActiveText;
  cursor: pointer;
}
</style>
